<template>
  <div class="box">
    <div class="box1">
      <div class="one">
        <div class="ico">
          <img src="./imgs/fabu_icon_dianping.png" alt="" />
        </div>
        <h3 class="text">产品点评</h3>
      </div>
      <div class="onejia">
        <div class="icotou">
          <div class="heart">
            <p class="haha">
              好物分享
              <img
                src="./imgs/fabu_icon_haowufenxiang.png"
                alt=""
                class="hong"
              />
            </p>
          </div>
          <img src="./imgs/fabu_icon_dongtai.png" alt="" />
        </div>
        <h3 class="text">写动态</h3>
      </div>
      <div class="one">
        <div class="icothree">
          <img src="./imgs/fabu_icon_xiewenzhang.png" alt="" />
        </div>
        <h3 class="text">写文章</h3>
      </div>
    </div>
    <div class="cha" @click="huan">
      <img src="./imgs/fabu_icon_guanbi.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    huan() {
      this.$router.push('../../home/index')
    },
  },
}
</script>

<style>
.box {
  width: 750px;
  height: 100vh;
  position: relative;

}
.box1 {
  display: flex;
  position: absolute;
  top: 1150px;
}

@-webkit-keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(500px);
    transform: translateY(500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(65px);
    transform: translateY(65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(28px);
    transform: translateY(28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-bottom {
  0% {
    -webkit-transform: translateY(500px);
    transform: translateY(500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(65px);
    transform: translateY(65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(28px);
    transform: translateY(28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.one {
  width: 140px;
  height: 173px;

  text-align: center;
  margin-left: 90px;
  -webkit-animation: bounce-in-bottom 1.1s;
  animation: bounce-in-bottom 1.1s;
}
.onejia {
  width: 140px;
  height: 173px;

  text-align: center;
  margin-left: 90px;
  -webkit-animation: bounce-in-bottom 1.1s;
  animation: bounce-in-bottom 1.1s;
}

.icotou {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 40px;
  background-color: #ff9191;
  position: relative;
}
.heart {
  width: 105px;
  height: 47px;
  text-align: center;
  line-height: 47px;
  color: #fd9191;
  background-color: #fff;
  border: 2px solid #fd9191;
  border-radius: 24px;
  position: absolute;
  top: -20px;
}
.haha {
  position: relative;
}
.hong {
  position: absolute;
  top: -10px;
}
.icothree {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  padding: 35px;
  background-color: #bbd2f4;
}
.writing {
  font-size: 24px;
}
.ico {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #feca7f;
  padding: 35px;
}
.text {
  margin-top: 20px;
}
.cha {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 1380px;
  left: 360px;

  /* left: -320px; */
}
</style>
